<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城首页</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <link href="../Mall/js/elment.css" rel="stylesheet">
    <script src="../Mall/js/main.js"></script>

    <link href="../admin/favicon.ico" rel="shortcut icon"/>
    <link href="../../indexCss.css" rel="stylesheet" type="text/css">
    <style>
        body {

            position: relative;
            color: rgba(0, 0, 0, 0.68)
        }

        a {
            color: rgba(0, 0, 0, 0.68);
            cursor: pointer; /*加手图标*/
            text-decoration: none;
        }

        a:hover {
            color: #24407EAD;
        }

        #topdiv > div {
            margin: 60px 0;

        }

        #div-bot {
            position: relative;
            bottom: 5px;
        }



    </style>
    <!--    引入首页样式-->
    <link href="../admin/indexCss.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--动态背景画布-->
<!--删除弹窗-->
<!--<canvas id="canvas" style="height: 100%;z-index: -111;"></canvas>-->
<header class=" navbar-fixed-top " id="h-new">
    <header-new v-bind:u="u"></header-new>
</header>


<section>

    <!--正文分布式4-4-4-->
    <div class="container ">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="d1">
                    <div class="col-md-12 column img1">
                        <img alt="" id="img1-1" src="http://www.sinoiov.com/skin/new/img/icon_index_truck.png">
                        <img alt="" id="img1-2" src="http://www.sinoiov.com/skin/new/img/icon_satellite.png">
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="row clearfix">
            <div class="col-md-4 column" style="overflow: hidden;" v-for="c in cls">
                <a :href="'/admin/Mall/indexMallCls.html?id='+c.id"><img :src="c.url" alt="" style="width: 100%;height: 160px;margin: 5px 0"></a>
            </div>
        </div>

        <div class="list-title">
            <hr>
            <!--            <input @click="openwin() " style="position: relative;top: 55px;color: black" type="button" value="弹窗">-->
            <h2 class="text-center" style="color: black"><b>热销商品</b></h2>
        </div>
        <div class="container" id="topdiv">
            <div class="row clearfix">
                <div class="col-md-1"></div>
                <div class="col-md-10 " id="ddd" style="padding: 0;position: relative;">
                    <!--瀑布流开始-->
                    <div class="grid">
                        <div class="grid-item col-md-4" v-for="(c,i) in com">
                            <div class="thumbnail" style="height: 600px;">
                                <a :href="'/admin/Mall/ComOne.html?id='+c.id" style="color: black">
                                <div style="overflow: hidden;width: 100%;height: 250px;text-align:center;">
                                    <img :src="c.url" alt="暂无商品图" style="height: 240px;"><!--width: 400px;-->
                                </div>
                                </a>
                                <div class="caption">
                                    <div style="height: 260px">
                                        <a :href="'/admin/Mall/ComOne.html?id='+c.id" style="color: black">
                                        <h3 style="height: 26px;overflow: hidden" v-text="c.name"></h3></a>
                                        <div style="height: 120px;overflow: hidden">
                                            <a :href="'/admin/Mall/ComOne.html?id='+c.id" style="color: black">
                                            <p v-text="c.intro"></p>
                                            </a>
                                        </div>

                                        <div class="progress progress-striped active" style="color: #333333">
                                            <div :style="'width:' +(((c.salesnum)/c.sum)*100) +'%;'"
                                                 class="progress-bar progress-bar-danger"
                                                 role="progressbar">
                                            </div>
                                        </div>
                                        <span>已售<b>{{c.salesnum}}</b>件</span>
                                        <span style="float: right">仅剩<b>{{c.sum - c.salesnum}}</b>件</span><br>
                                       <b style=" color: #F1393A;font-size: 35px;font-weight: 1000;">
                                           <i aria-hidden="true" class="fa fa-jpy"></i>{{c.price}}</b>
                                    </div>
                                    <div id="div-bot">
                                        <p>
                                            <button @click="shopping(c.id)" class="btn btn-danger btn-sm"
                                                    style="float: right;border-radius: 10px" type="button">
                                                <i aria-hidden="true" class="fa fa-cart-arrow-down fa-lg"></i> 去抢购
                                            </button>
                                            <button @click="shopOne(c.id)" class="btn btn-success btn-sm"
                                                    style="float: right;margin-right:8px;border-radius: 10px"
                                                    type="button">
                                                <i aria-hidden="true" class="fa fa-cart-plus fa-lg"></i> 加入购物车
                                            </button>
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-md-1"></div>
                    <el-col :offset="6" :span="12">
                        <el-pagination
                                :current-page.sync="pageInfo.pageNum"
                                :page-size="pageInfo.pageSize"
                                :total="pageInfo.total"
                                @current-change="loadCommodity"
                                @size-change="loadCommodity"
                                layout="total, prev, pager, next, jumper">
                        </el-pagination>
                    </el-col>
            </div>
        </div>
    </div>
</section>
<!--正文在这里继续-->

<myfooter></myfooter>

</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--导入弹窗组件-->
<script src=" https://unpkg.com/sweetalert/dist/sweetalert.min.js "></script>
<!--引入vue和axios-->
<script src="http://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入footer-->
<script src="../adminjs/footer.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--引入footer-->
<!--<script src="adminjs/footer.js"></script>-->

<script>

    let section_v = new Vue({
        el: "body>section",
        data: {
            userid: 0,
            cls: [], //商品类集合
            com: [], //商品集合
            rcls: [], //资讯类集合
            rep: [], //资讯集合
            pageInfo:[], //分页全部信息
            pageSize:'', //分页全部信息
            pagetotal:'', //分页全部信息
            // //绑定所要展示的商品信息属性

        },
        created: function () {
            axios.post("/admin/selectToClass").then(function (response) {
                section_v.cls = response.data;
            })
            axios.get("/mall/getUser").then(function (response) {
                section_v.userid = response.data.userid;
            })
            this.loadCommodity(1)


        },
        methods: {
            loadCommodity:function (pageNum) {
                if(! pageNum){
                    pageNum = 1;
                }
                axios({
                    url: '/admin/selectToCommodityLimit',
                    method: "GET",
                    params:{
                        pageNum:pageNum
                    }
                }).then(function(r){
                    console.log(r.data)
                    section_v.pageInfo = r.data;
                    section_v.com = r.data.list;

                })
            },
            shopOne: function (comid) {
                if (section_v.userid != 0 && section_v.userid != null) {
                axios.get("/shop/insertToShopcar?uid=" + section_v.userid + "&comid=" + comid).then(function (response) {
                        if (response.data == "ok") {
                            swal("","加入成功!", "success")
                            return;
                        }
                        swal("",response.data, "warning")
                }) } else {
                    swal("您还没登录啊", "请先登录哦!", "error", {
                        button: "现在去",
                    }).then((value) => {
                        if (value == true) {
                            location.href = "/login.html";
                        }
                    })
                }
            },
            shopping: function (id) {
                if (section_v.userid != 0 && section_v.userid != null) {
                    let num = prompt("请输入您要购买的数量!")
                    if (num > 0) {
                        axios.get("/shopping/pay?id=" + id + "&num=" + num).then(function (response) {
                            if (response.data=="购买成功!"){
                                swal("",response.data, "success").then((value => location.reload()))
                            }
                            swal("",response.data, "warning").then((value => location.reload()))
                        })
                        return;
                    }
                } else {
                    swal("您还没登录啊", "请先登录哦!", "error", {
                        button: "现在去",
                    }).then((value) => {
                        if (value == true) {
                            location.href = "/login.html";
                        }
                    })
                }
            },
            //     openwin:function() {
            //
            // window.open ("/index.html", "newwindow", "height=500, width=600, toolbar=no," +
            //     " menubar=no, scrollbars=no, resizable=no, location=no, status=no")
            //         window.pageXOffset(600)
            //         window.pageYOffset=600
            // }

        },
    })

</script>

<!--弹窗-->

<script>

</script>


<!--背景线条-->
<script src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js" type="text/javascript"></script>
　
<!--右键出字体-->
<script src="../adminjs/bg.js"></script>
　<script src="js/header-new.js"></script>
<script>
    let vn = new Vue({
        el:"#h-new"
        ,data:{
            u:[]
        },
        created:function (){
            axios.get("/mall/getUser").then(function (response) {
                vn.u = response.data;
            })
        }
    })
</script>

</body>
</html>

